<script>
init({
  title: 'Loading Font Size',
  desc: 'Use `loadingFontSize` option to custom the loading font size of the loading text.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<script>
  let size = 'auto'

  function rebuild () {
    $('#table').bootstrapTable('destroy')
      .bootstrapTable({
        loadingFontSize: size
      })
      .bootstrapTable('showLoading')
  }

  function mounted () {
    $('#size').change(function () {
      size = $(this).val()
      rebuild()
    })
    rebuild()

    $('#width').change(function () {
      $('#wrapper').css('width', $(this).val())
      rebuild()
    })
  }
</script>

<template>
  <div
    id="toolbar"
    class="select"
  >
    <span>Font Size: </span>
    <select
      id="size"
      class="form-control"
    >
      <option value="auto">
        Auto
      </option>
      <option value="12px">
        12px
      </option>
      <option value="2rem">
        2rem
      </option>
    </select>
    <span> Table Width: </span>
    <select
      id="width"
      class="form-control"
    >
      <option value="">
        Auto
      </option>
      <option value="600px">
        600px
      </option>
      <option value="400px">
        400px
      </option>
    </select>
  </div>

  <div id="wrapper">
    <table
      id="table"
      data-toggle="table"
      data-height="460"
      data-toolbar="#toolbar"
    >
      <thead>
        <tr>
          <th
            data-field="id"
            data-sortable="true"
          >
            ID
          </th>
          <th
            data-field="name"
            data-sortable="true"
          >
            Item Name
          </th>
          <th
            data-field="price"
            data-sortable="true"
          >
            Item Price
          </th>
        </tr>
      </thead>
    </table>
  </div>
</template>

<style>
  select.form-control {
    display: inline-block;
    width: 80px;
  }
</style>
